<script setup name="PictureUpload">
import { ref } from 'vue';
import { ElMessage } from 'element-plus';
import uploadOss from '/@/utils/oss';
let uploadVideoList = ref([]);
let loading = ref(false);
let uploadHeader = {
	Authorization: (localStorage.getItem('tokenHead') || '') + localStorage.getItem('token'),
};
const uploadRef = ref();
const maxSize = 200; // M
const fileList = ref([]);

uploadVideoList.value = [];

function handleSuccess(response, file, fileList) {
	console.log('response', response, fileList);
	if (response.res.statusCode !== 200) {
		ElMessage({
			type: 'error',
			message: file.name + '上传失败',
		});
		loading.value = false;
		return;
	}
	ElMessage({
		type: 'success',
		message: file.name + '上传成功',
	});
	uploadVideoList.value = fileList.filter((item, index) => {
		try {
			if (item.response.res.statusCode === 200) {
				return {
					url: item.url,
					name: item.name,
				};
			}
		} catch (err) {
			console.log('');
		}
	});
	loading.value = false;
}

function handleError(err, file) {
	ElMessage({
		type: 'error',
		message: file.name + '上传失败' + '，请检查本地网络',
	});
	loading.value = false;
}

function beforeUpload(file) {
	console.log(file.size);
	if (maxSize * 1024 * 1024 < file.size) {
		ElMessage({
			type: 'info',
			message: `视频最大尺寸为${maxSize}M，超出设定尺寸`,
		});
		return false;
	}
	if (loading.value === true) {
		ElMessage({
			type: 'info',
			message: '请等待视频上传完成',
		});
		return false;
	}
}
async function doUpLoad(options) {
	await uploadOss(options, 'shopvideo');
}
</script>

<template>
	<div class="selector-box">
		<div class="selector-box">
			<el-row :gutter="20" class="selector-header">
				<el-col :span="24">
					<el-upload
						:disabled="loading"
						class="Picture-upload"
						ref="uploadRef"
						:multiple="true"
						:on-success="handleSuccess"
						:on-error="handleError"
						:headers="uploadHeader"
						:before-upload="beforeUpload"
						:http-request="doUpLoad"
						:file-list="fileList"
						:show-file-list="false"
						name="multipartFileList"
						list-type="picture"
						accept="video/*"
					>
						<el-button size="small" type="primary" class="upload-btn">{{ loading ? '正在上传视频...' : '点击上传视频' }}</el-button>
						<template #tip>
							<div class="el-upload__tip">视频最大尺寸为{{ maxSize }}M</div>
						</template>
					</el-upload>
				</el-col>
			</el-row>
			<el-row :gutter="20" class="selector-content" v-loading="loading">
				<!-- 自己做数据的渲染 -->
				<el-col :span="24">
					<div class="img-list">
						<el-row :gutter="10">
							<el-col :span="6" :key="`upload-img-item-${index}`" v-for="(item, index) in uploadVideoList">
								<div class="img-item">
									<div class="img-box">
										<video controls>
											<source :src="item.url" type="video/mp4" />
											您的浏览器不支持 HTML5 video 标签。
										</video>
									</div>
									<div class="name">{{ item.name }}</div>
								</div>
							</el-col>
						</el-row>
					</div>
				</el-col>
			</el-row>
		</div>
	</div>
</template>

<style lang="scss" scoped>
.selector-box {
	height: 500px;
	display: flex;
	flex-direction: column;
	:deep(.el-icon--close) {
		display: none;
	}
	.selector-header {
		height: 80px;
		align-items: center;
		justify-content: center;
	}
	.selector-content {
		flex: 1;
		height: 100px;
		overflow-y: auto;
		overflow-x: hidden;
	}
	.title {
		font-size: 30px;
		font-weight: bold;
		padding: 10px 0;
	}
	.img-list {
		.img-item {
			margin-bottom: 10px;
			position: relative;
			cursor: pointer;
			.checked-mask {
				display: none;
			}
			&.img-item-checked {
				.checked-mask {
					display: flex;
					align-items: center;
					justify-content: center;
					width: 100%;
					height: 100%;
					z-index: 3;
					background: rgba(0, 0, 0, 0.3);
					left: 0;
					top: 0;
					position: absolute;
					color: #409eff;
				}
			}
			.img-box {
				display: flex;
				align-items: center;
				justify-content: center;
				height: 200px;
				overflow: hidden;
				video {
					width: 100%;
					height: 200px;
				}
			}
			.name {
				font-size: 14px;
				text-align: center;
				padding: 5px 0;
			}
		}
	}
}
</style>
